import { create } from "zustand";

// 创建 store
const useStore = create((set) => ({
  number: 0,
  name: "数字",

  add: () => set((state) => ({ number: state.number + 1 })),
  minus: () => set((state) => ({ number: state.number - 1 })),

  asyncAdd: () => {
    setTimeout(() => {
      set((state) => ({ number: state.number + 1 }));
    }, 1000);
  },
}));

// 组件
function App() {
  const { name, number, add, minus, asyncAdd } = useStore();
  return (
    <div>
      <p>
        {name}: {number}
      </p>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
      <button onClick={asyncAdd}>async +</button>
    </div>
  );
}

export default App;
